<div class="widget_content">                                                                              
                    <div class="stat_block">
                        <h4>Detalle</h4>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <b>Varones</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadVarones2; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Mujeres</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadMujeres2; ?>
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td align="right">
                                        <b>Total</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadMujeres2+$cantidadVarones2; ?>
                                    </td>                                    
                                </tr>
                            </tbody>                            
                        </table>                        
                    </div>                                
            </div>
<svg id="testcrt" class="mypiechart"></svg>                                
<script>

    //datos y graico por genero
    var testdata = [
        {
            key: "Varones",
            y: <?php echo $cantidadVarones; ?>
        },
        {
            key: "Mujeres",
            y: <?php echo $cantidadMujeres; ?>
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#testcrt")
                .datum([testdata])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });
</script>
<script src="<?php $this->webroot; ?>js/graficos/d3.v2.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/nv.d3.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/legend.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pie.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pieChart.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/utils.js"></script>